<template>
	<view class="tag">
		<view class="cipian " @click="targetClick(item)" :class="item.class" v-for="(item,index) in styledItems">
			<image class="image" :src="item.image" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isRadius: {
				type: Boolean,
				default: true
			},
			items: {
				type: Array,
				default: []
			}

		},
		computed: {
			styledItems() {
				var items = this.items;
				return items.map((item, index) => {
					var result = ""
					if (items.length % 2 == 0 && index == 0) {
						result = "item1"
					}
					item.class = result;
					return item;
				});
			}
		},
		methods: {

			targetClick(item) {
				console.log(item)
				this.$targetPage(item)
			},
			test(item, index) {
				var result = "c2";

				return result;
			}
		}
	}
</script>

<style>
	.tag {
		display: grid;

		grid-template-columns: auto auto;
		grid-gap: 10px;
	}



	.b {
		flex: 1;
	}

	.grid-item {}

	.item1 {
		grid-row: 1 / 2;
	}

	.cipian {

		background-color: #EEEEEE;
		border-radius: 10px;
		overflow: hidden;
		height: 80px;
	}


	.c0 {
		grid-column: 1;
		grid-row: 1 / 3;

	}

	.c1 {
		grid-row: 1;
		grid-column: 2 / 4;
	}

	.c2 {
		grid-row: 2;
		grid-column: 2 / 4;
	}

	.c3 {
		grid-row: 3;
		grid-column: 2 / 4;
	}

	.c4,
	.c5 {
		grid-column: 1;
		grid-row: 3;
		height: 80px;
	}

	.image {
		width: 100%;
		height: 100%;
	}
</style>